import React, { useState } from 'react';
import { Button, Checkbox, Form, Input, Radio, InputNumber, DatePicker as TDatePicker } from 'antd';
import { useSelector, useDispatch ,history } from "umi"
const DatePicker: any = TDatePicker;
const RangePicker: any = DatePicker.RangePicker;
type Props = {}

const AddConpon = (props: Props) => {

    const [timeDate,setTimeDate] = useState([])
    const [useTimeDate,setUseTimeDate] = useState('')
    const dispatch=useDispatch()

    
    const changeDate = (value: any, dateString: any) => {
        console.log("dateString", dateString);
        setTimeDate(dateString)
    }
    
    const changeUseTime = (value: any, dateString: any) => {
        console.log("changeUseTime", dateString);
        setUseTimeDate(dateString)
    }
    
    const onFinish = (values: any) => {
        values.time=timeDate
        values.useTime=useTimeDate
        if(values.state=='1'){
            values.state=Boolean(true)
        }else if(values.state=='2'){
            values.state=Boolean(false)
        }
        console.log('Success:', values);
        dispatch({
            type: "marketing/addConpon",
            payload: values
          })
          //跳转
          history.push('/home/marketing/coupon/list')

    };
    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };

    const goBack=()=>{
        history.push('/home/marketing/coupon/list')
    }

    return (
        <>
            <div>
                <span onClick={goBack} style={{marginRight:'30px',color:'blue'}}>返回</span>
                <span>添加优惠券</span>
            </div>

            <Form
                name="basic"
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 16 }}
                style={{ maxWidth: 600 }}
                initialValues={{ remember: true }}
                onFinish={onFinish}
                // onFinishFailed={onFinishFailed}
                autoComplete="off"
            >
                {/* title string 
标题
必需
receiveType string 
发送方式
必需
1.自己领取 2.新人劵

price number 
金额
必需
time array[string]
领取时间段
必需
useTime array[string]
使用时间段
必需
state boolean 
开启关闭 */}

                <Form.Item
                    label="优惠券名称"
                    name="title"
                >
                    <Input />
                </Form.Item>

                <Form.Item name="receiveType" label="发送方式">
                    <Radio.Group>
                        <Radio value="1">手动领取</Radio>
                        <Radio value="2">新人券</Radio>
                    </Radio.Group>
                </Form.Item>

                <Form.Item name="price" label="金额">
                    <InputNumber></InputNumber>
                </Form.Item>

                <Form.Item name="time" label="领取时间段" >
                    <RangePicker onChange={changeDate} />
                </Form.Item>
                <Form.Item name="useTime" label="使用时间" >
                    <DatePicker onChange={changeUseTime}/>
                </Form.Item>

                <Form.Item name="state" label="状态">
                    <Radio.Group>
                        <Radio value="1">开启</Radio>
                        <Radio value="2">关闭</Radio>
                    </Radio.Group>
                </Form.Item>

                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                    <Button type="primary" htmlType="submit">
                        提交
                    </Button>
                </Form.Item>
            </Form>
        </>
    )
}

export default AddConpon